import axios from 'axios'
import Header from './components/Header.js'
import {Row,Col,Breadcrumb,Input} from 'antd'
import Advert from './components/Advert'
import Footer from './components/Footer'
import LeaveMassage from './components/LeaveMassage'
import LastMessage from './components/LastMessage'
import Author from './components/Author.js';
import './static/style/pages/detail.css'
import MarkNav from 'markdown-navbar'
import 'markdown-navbar/dist/navbar.css'
import marked from 'marked'
//代码高亮
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
import servicePage from './config/apiUrl'
import {
  CalendarOutlined,
  FolderOutlined,
  FireOutlined,
} from '@ant-design/icons';

import React, { Component ,useState} from 'react'

const { TextArea } = Input;


export default class Detail extends Component {
  constructor(){
    super()
    this.state={
      mylist:[],
      typeId:0,
      articleId:0,
      messageCount:0
    }

  }
  //这个函数会在构造之后和render之前执行
  componentDidMount (){
    let id = this.props.match.params.id
    const renderer = new marked.Renderer()
    marked.setOptions({
      renderer:renderer,
      //启动github的渲染方式
      gfm:true,
      //允许代码是写错的
      pedantic:false,
      //是否忽略html标签
      sanitize:false,
      //是否允许输出表格样式
      tables:true,
      breaks:false,
      //美化列表
      smartLists:true,
      //高亮的标准
      highlight:function(code){
        return hljs.highlightAuto(code).value
      }
    })
    axios(servicePage.getArticleById+id).then(
        (res)=>{
          // console.log(res.data.messageCount[0].messageCount)
          this.setState({
            typeId:res.data.data[0].typeId,
            html: marked(res.data.data[0].content),
            mylist:res.data.data[0],
            articleId:res.data.data[0].id,
            messageCount:res.data.messageCount[0].messageCount
          })
          // console.log(this.state.articleId)
        }
      ).catch(function (error) {
            console.log(error);
        })
  }

  render() {
    const contentList ={
      '教程':1,
      '生活':2
    }
    return (
    <div>
      <Header></Header>
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}>
          <div>
            <div className='bread-div'>
              <Breadcrumb>
                <Breadcrumb.Item ><a href='/main'>首页</a></Breadcrumb.Item>
                <Breadcrumb.Item ><a href={'/list/'+ contentList[this.state.mylist.typeName]}>{this.state.mylist.typeName}</a></Breadcrumb.Item>
                <Breadcrumb.Item >{this.state.mylist.title}</Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <div>
              <div className='detailed-title'>
                {this.state.mylist.title}
              </div>
              <div className='list-icon center'>
                <span><CalendarOutlined />{this.state.mylist.addTime}</span> &nbsp;
                <span><FolderOutlined />{this.state.mylist.typeName}</span>&nbsp;
                <span><FireOutlined />{this.state.mylist.view_count}</span>&nbsp;
                <span>评论数量：{this.state.messageCount}</span>&nbsp;
              </div>
              <div className='detailed-content'
                dangerouslySetInnerHTML={{__html:this.state.html}}
              >
                {/* <ReactMarkdown
                source={this.state.mylist.content}
                escapeHtml={false}
                ></ReactMarkdown> */}
              </div>
              <div className='endNote'>-------文章已经结束，如果有好的建议请留言～-------</div>
              <LeaveMassage props={this.props.match.params.id}></LeaveMassage>
              <LastMessage props={this.props.match.params.id}></LastMessage>
            </div>
          </div>

        </Col>
        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author></Author>
          <Advert></Advert>
          <div className='detailed-nav comm-box'>
            <div className='nav-title'>文章目录</div>
            <MarkNav
              className='article-menu'
              source={this.state.mylist.content}
              ordered={false}
            ></MarkNav>
          </div>
        </Col>
      </Row>
      <Footer></Footer>
    </div>
    )
  }
}

